<template>
    <div id="WithdrawalsRecord">
        <div class="header"><img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back">提现记录</div>
        <scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
            lock-x  ref="scrollerBottom" height="-48"  v-if="ReadyMoneyList !== ''" v-show="flg">  
          <ul class="box">
              <li v-for="(item,index) in ReadyMoneyList" :key="index" @click="See(item)">
                  <div class="record_l left">
                      <p class="color font15">{{ item.content }}</p>
                      <p class="color2">{{ item.formatTime }}</p>
                  </div>
                  <div class="record_r right">
                      <p class="active" v-if="item.status == 1">审核中</p>
                      <p class="active2" v-if="item.status == 2">提现成功</p>
                      <p class="active" v-if="item.status == 3">审核中</p>
                      <p class="color font18">￥{{ item.num }}</p>
                  </div>                                
              </li>            
          </ul>
        </scroller> 
       
        <ul v-show="!flg">
            <li v-if="ReadyMoneyList.length == 0" style="text-align:center;height:0;padding:0;">
                <img class="no_data" src="@/assets/no_data.png" alt="">
            </li>
        </ul>         
    </div>
</template>
<script>
import { XHeader, Scroller } from "vux";
import { getReadyMoneyList } from "@/service/home.js";
import axios from "axios";
var pullupDefaultConfig = {
  content: "上拉加载更多",
  pullUpHeight: 60,
  height: 40,
  autoRefresh: false,
  upContent: "上拉加载更多",
  downContent: "正在加载中。。。",
  loadingContent: "没有更多了",
  clsPrefix: "xs-plugin-pullup-"
};
export default {
  components: { XHeader, Scroller },
  data() {
    return {
      token: localStorage.token,
      ReadyMoneyList: [],
      userInfo: {},
      pullupDefaultConfig: pullupDefaultConfig,
      pageNum: 1,
      pageNo: "",
      pageSize: 26,
      total: "",
      list_length: "",
      flg: ""
    };
  },
  mounted() {
    this._getReadyMoneyList();
    this.$nextTick(() => {
      this.$refs.scrollerBottom.reset({ top: 0 });
    });
  },
  methods: {
    _getReadyMoneyList() {
      var data = {
        operation: "string",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        timestamp: 0,
        version: "string"
      };

      getReadyMoneyList(data).then(res => {
        if (res.data.errCode == 0) {
          console.log(res.data);
          this.total = res.data.total;
          this.pageNo = res.data.pageNo;
          var list = res.data.list;
          list.forEach(item => {
            this.ReadyMoneyList.push(item);
          });
        }
        if (this.ReadyMoneyList.length == 0) {
          this.flg = false;
        } else {
          this.flg = true;
        }
        this.list_length = this.ReadyMoneyList.length;
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      });
    },
    loadMore() {
      this.pageNum = parseInt(this.pageNo + 1);
      if (this.list_length < this.total) {
        this._getReadyMoneyList();
        this.$refs.scrollerBottom.donePullup();
      }
    },
    See(index) {
      this.userInfo = index;
      localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
      this.$router.push("/my/Details");
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>
<style scoped lang="less" >
#WithdrawalsRecord {
  background: #fff;
  .box {
    li {
      height: 80px;
      border-top: 1px solid #ddd;
      padding: 22px 0;
      .record_r {
        text-align: right;
        .active {
          color: #666666;
        }
        .active2 {
          color: #2fc701;
        }
        .active3 {
          color: #fd382f;
        }
      }
    }
  }
  .vux-header-title {
    color: #000000 !important;
  }
}
</style>
